<template>
  <div class="container">
    <div class="background-image"></div>
    <div class="content">
      <el-container>
        <el-header class="custom-header">与您的宝贝聊天</el-header>
        <el-main>
          <div class="chat-container">
            <div v-for="msg in messages" :key="msg.id" :class="msg.isSelf ? 'message-bubble self' : 'message-bubble other'">
              {{ msg.content }}
            </div>
          </div>
          <div class="input-container">
            <el-input
              type="textarea"
              v-model="message"
              placeholder="在这里输入你的消息..."
              @keyup.enter="sendMessage">
            </el-input>
            <el-button type="primary" @click="sendMessage">发送</el-button>
          </div>
        </el-main>
      </el-container>
    </div>
  </div>
</template>

<script>
import axios from 'axios';
import { v4 as uuidv4 } from 'uuid';

export default {
  name: 'PetChat',
  data() {
    return {
      message: '',
      messages: [],
      sessionId: uuidv4(), // 在页面加载时生成一个唯一的sessionId
      petId: null
    };
  },
  created() {
    this.petId = this.$route.query.petId;
    console.log(`Chatting with petId: ${this.petId}`);
  },
  methods: {
    sendMessage() {
      if (!this.message.trim()) {
        return; // 阻止发送空消息
      }
      const requestBody = {
        content: this.message,
        sessionId: this.sessionId, // 包含sessionId
        petId: this.petId // 包含petId
      };
      // 添加用户消息到消息列表
      this.messages.push({
        id: this.messages.length + 1,
        content: this.message,
        isSelf: true
      });
      this.message = ''; // 清空输入框
      axios.post('/api/chat/send', requestBody)
        .then(response => {
          const responseData = response.data;
          if (responseData && responseData.data && responseData.data.content) {
            this.messages.push({
              id: this.messages.length + 1,
              content: responseData.data.content,
              isSelf: false
            });
          } else {
            console.error('接收到错误或格式无效:', responseData);
          }
        })
        .catch(error => {
          console.error('发送消息错误:', error);
          this.messages.push({
            id: this.messages.length + 1,
            content: `错误：${error.message || "与服务器通信失败"}`,
            isSelf: false
          });
        });
    }
  }
}
</script>

<style scoped>
.container {
  position: relative;
  width: 100%;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  background-color: #000; /* 备用背景颜色 */
}

.background-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url('@/assets/background.jpg'); /* 使用相对路径引入图片 */
  background-size: cover;
  background-position: center;
  opacity: 0.8; /* 根据需要调整透明度 */
}

.content {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.custom-header {
  background-color: rgba(255, 255, 255, 0.9);
  text-align: center;
  font-size: 28px;
  font-weight: bold;
  padding: 20px;
  border-bottom: 1px solid #ddd;
  color: #333;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
  border-radius: 0; /* 改成矩形 */
}

.el-main {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.chat-container {
  flex: 1;
  overflow-y: auto;
  padding: 20px;
  background: rgba(255, 255, 255, 0.9); /* 设置背景颜色和透明度 */
  display: flex;
  flex-direction: column;
  border-radius: 8px;
}

.message-bubble {
  max-width: 70%;
  padding: 10px 15px;
  margin: 10px 0;
  border-radius: 20px;
  position: relative;
  word-wrap: break-word;
  white-space: pre-wrap;
}

.message-bubble.self {
  background: #d1eaff;
  align-self: flex-end;
  text-align: right;
}

.message-bubble.other {
  background: #f1f0f0;
  align-self: flex-start;
  text-align: left;
}

.input-container {
  display: flex;
  align-items: center;
  padding: 10px;
  background: rgba(255, 255, 255, 0.9); /* 设置背景颜色和透明度 */
  border-radius: 8px;
}

.el-input {
  flex: 1;
  margin-right: 10px;
}
</style>
